@import '~styles/config.scss';

.main {
    margin: -20px 0px;

    .hh {
        padding      : 34px 14px 14px 14px;
        display      : flex;
        border-bottom: 1px solid $--border-color-extra-light;

        .li {
            border      : 1px solid #e3e3e3;
            line-height : 40px;
            padding     : 0px 10px;
            margin-right: 10px;

            &.true {
                background: #e3e3e3;
            }
        }
    }

    .mm {
        height: calc(100vh - 240px);

        overflow      : hidden;
        overflow-y    : auto;

        .sys {
            display: flex;
            flex-wrap: wrap;
            margin-left:-10px;
            padding:0px 14px 14px 14px;
            .item {
                width:calc(33.33333% - 10px);
                display      : flex;
                align-items  : center;
                border-radius: 6px;
                background   : $--background-color-base;
                margin-top   : 10px;
                padding      : 14px 14px 14px 10px;
                box-sizing: border-box;
                border       : 1px solid $--border-color-lighter;
                margin-left:10px;
                margin-top:10px;
                .ss {
                    padding-right: 10px;
                    display      : flex;
                    align-items  : center;

                    .icon {
                        display        : flex;
                        align-items    : center;
                        justify-content: center;
                        width          : 20px;
                        height         : 20px;
                        border-radius  : 100%;
                        border         : 2px solid $--border-color-light;
                        background     : #fff;

                        .i {
                            font-size: 12px;
                        }

                        &.true {
                            background  : $--color-success;
                            color       : #fff;
                            border-color: lighten($--color-success, 34%)
                        }
                    }
                }

                .ll {
                    flex: auto;

                    .t1 {
                        line-height: 16px;
                        font-size  : 14px;
                        font-weight: bold;
                        span{
                            color:$--color-warning;
                            font-weight: normal;
                            font-size: 12px; padding-left:6px;
                            opacity: .8;
                        }
                    }

                    .t2 {
                        padding-top: 10px;
                        color      : $--color-text-secondary;
                        line-height: 14px;
                        font-size  : 12px;
                    }
                }

                .rr {
                    flex: none
                }

                &:hover {
                    cursor: pointer;
                }
            }
        }

        .nei {
            padding:14px;
        }

        .wai {
            padding:14px;
        }

        .query{
            width:400px;
            border-top:1px solid $--border-color-lighter;
            border-left:1px solid $--border-color-lighter;
            .ul{
                display: flex;
              
            }
            .li{
                border-bottom:1px solid $--border-color-lighter;
                border-right:1px solid $--border-color-lighter;
                padding:5px;line-height:16px;
                font-size: 12px;
            }
            .li0{
                width:30px; text-align: center;
                flex:none
            }
            .li1{
                width:100px;
                flex:none;
            }
            .li2{
                flex:auto;
            }
            .li3{
                width:100px;
                flex:none;
            }
            .li100{
                flex:auto;
                text-align: center;
                padding:20px 0px;
            }
        }

    }
}

.footerLabel{
    font-size: 12px;
    vertical-align: middle;
    line-height:32px;
    display: inline-block;
    max-width:60%;
    margin-left:15px;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}